import React from 'react';
import {inject, observer } from 'mobx-react';
import { WeaTop,WeaFormItem,WeaUpload,WeaSearchGroup,WeaDialog,WeaNewScroll} from 'ecCom';
import {Button,Divider,QueueAnim,Spin,message,Steps  } from 'antd';
import GoalImportLog from './GoalImportLog';
const Step = Steps.Step;

@inject("goalBaseStore")
@observer
export default class GoalImport extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            viewHeight: this.getHeight(),
            loading: false,
            fileIds: [],
            fileList: [],
            createvisable:false,
          };
    }

    componentDidMount(){
        this.props.onRef(this)
    }

    getButtons = (loading)=>{
        return [<WeaUpload
            viewAttr={3}
            uploadUrl="/api/doc/upload/uploadFile"
            category="string"
            onChange={(ids, list) =>
                this.setState({ fileIds: ids, fileList: list })
            }
            onUploading={status =>
                this.setState({ loading: status === "uploading" })
            }
            >
            <Button loading={loading} type="primary">
                选择文件
            </Button>
        </WeaUpload>]
        
    }

    //开始导入
    startImport = () =>{
        let {goalBaseStore} = this.props;
        let {fileIds} = this.state;
        if(fileIds.length <= 0){
            message.info("请选择上传的附件")
            return;
        }
        goalBaseStore.importGoal({fileid:fileIds[0]});
        this.openDialogLog();
    }

    
    openDialogLog = () =>{
        this.setState({
                    createvisable:true,
                })
    }

    onlyClose = () =>{
        this.setState({
            createvisable:false,
        })
    }

    //上传附件
    upload = (ids, list) => {
        this.setState({fileIds:ids})
    }

    //模板下载
    downLoadTemplate = () =>{
        let {goalBaseStore} = this.props;
        goalBaseStore.downLoadTemplate();
    }

    getHeight = () =>{
        let _h = window.innerHeight-300;
        return _h;
    }



    render(){
        const {goalBaseStore} = this.props;
        const {loading} = goalBaseStore;
        const { fileIds, fileList,createvisable,viewHeight } = this.state;
        return (
            // <Spin spinning = {loading}>
                <div className='workrelate-goal-import'>
                    <WeaNewScroll height={window.innerHeight-90} >
                        <WeaSearchGroup title={"基本信息"} showGroup={true} >
                            <WeaUpload
                                uploadUrl="/api/doc/upload/uploadFile"
                                category="string"
                                maxUploadSize={5}
                                viewAttr={3}
                                limitType={'xls,xlsx'}
                                isDetail={false}
                                autoUpload={true}
                                onChange={(ids, list) =>this.upload(ids, list)}
                                maxFilesNumber={1}
                                showClearAll={false}
                                sortable = {false}
                            />
                        </WeaSearchGroup>

                        <WeaSearchGroup title={"导入说明"} showGroup={true} >
                                <div><strong>导入步骤：</strong></div>
                                {/* <Steps direction="vertical">
                                    <Step title="第一步" description="先下载Excel文档模板：目标导入模板(下载下来的红色字段为必填字段)"></Step>
                                    <Step title="第二步" description="下载后，填写内容，注意，要填写的内容在下边的说明中有详细的说明，请一定要确定你的Excel文档的格式是模板中的格式，而没有被修改掉。" />
                                    <Step title="第三步" description="点击右上角开始导入，进行信息的导入。" />
                                    <Step title="第四步" description="如果以上步骤和Excel文件正确的话，则会被正确的导入，也会出现提示。如果有问题，可点击“查看详细信息”进行查看。" />
                                </Steps> */}
                                <div className="workrelate-goal-import-step" key={"a"}>第一步，先下载Excel文档模板：<a></a>目标导入模板(下载下来的红色字段为必填字段)<Button type="primary" onClick={()=>this.downLoadTemplate()}>模板下载</Button></div>
                                <div className="workrelate-goal-import-step" key={"b"}>第二步，下载后，填写内容，注意，要填写的内容在下边的说明中有详细的说明，请一定要确定你的Excel文档的格式是模板中的格式，而没有被修改掉。
                                    (<u>建议导入已有excel文件数据时将原excel信息对应复制到模板中，复制时进行“选择性粘贴”，并选择“数值”，之后进行导入</u>)</div>
                                <div className="workrelate-goal-import-step" key={"c"}>第三步，点击右上角开始导入，进行信息的导入。</div>
                                <div className="workrelate-goal-import-step" key={"d"}>第四步，如果以上步骤和Excel文件正确的话，则会被正确的导入，也会出现提示。如果有问题，可点击“查看详细信息”进行查看。</div>
                                <div key={"e"}>	<strong>注意事项：</strong></div>
                                <div key={"f"}><ul>
                                                    <li style={{color:"#FF0000"}}>
                                                        一次性导入的记录不要太多，建议控制在 <b>1000</b> 以内。
                                                    </li>
                                                    <li>
                                                        系统导入方式为逐行判断导入，所以符合要求的记录将被导入系统，而导入失败的记录会给出相应提示信息。
                                                    </li>
                                                </ul>
                                </div>
                                <div key={"g"}>	<strong>字段说明：</strong></div>
                                <div key={"h"}>
                                    <ul>
                                        <li style={{color:"#FF0000"}}>标识：每条数据的唯一标识项，可用p1,p2,p3,p4...表示，需确保此标识没有重复</li>
                                        <li style={{color:"#FF0000"}}>上级标识：用于表示上级目标的标识，如果此目标的上级目标已经在系统中存在，则可直接填写上级目标在系统中的id值，如果上级目标在导入文件中，则填写上级目标的标识值</li>
                                        <li style={{color:"#FF0000"}}>目标名称：填写目标的名称</li>
                                        <li style={{color:"#FF0000"}}>目标类型：可填写内容包括“财务效益类”、“客户运营类”、“内部经营类”、“学习成长类”、“备忘类”</li>
                                        <li style={{color:"#FF0000"}}>目标周期：用数字来表示目标的周期类型，对应关系为 月度-1  季度-2 年度-3 三年-4 五年-5</li>
                                        <li>责任人：此处填写责任人在系统中的id值，人员名称与id的对应关系可在导入模板的sheet2中进行查找</li>
                                        <li>目标值：填写对应的目标值</li>
                                        <li>目标值单位：填写对应的目标值单位</li>
                                        <li>完成值：填写对应的完成值</li>
                                        <li>完成值单位：填写对应的完成值单位</li>
                                        <li>年份：目标结束日期对应的年份，如不填写则默认为当前年份</li>
                                        <li>月份：目标结束日期对应的月份，如不填写则默认为当前月份</li>
                                        <li>季度：目标结束日期对应的季度，如不填写则默认为当前季度</li>
                                        <li>名称附加：此列主要是针对目标名称相似时使导入数据录入更加方便，例如目标名称为XXX有效合同金额，则可在目标名称中填入XXX，在此列中填入“有效合同金额”，最终导入系统中的实际目标名称为“目标名称”+“名称附加信息”</li>
                                    </ul> 
                                </div>
                        </WeaSearchGroup>
                        <WeaDialog visible={createvisable} title="导入日志" icon="icon-coms-plus" iconBgcolor="#7734FF"
                                //    buttons={this.getDialogButtons()}
                                style={{width:window.innerWidth*0.6,height:window.innerHeight-250}} 
                                onCancel={this.onlyClose.bind(this)}>
                                <GoalImportLog loading={loading}  />  
                        </WeaDialog>
                    </WeaNewScroll>
                </div>
            // </Spin>
        )
    }
      
}